<template>
	<div class="captiontext" :style="{ height: datas.height + 'px' }">
		<div class="title-block-wrap" :style="bgStyle(datas)">
			<div class="title" :style="contentStyle(datas)">
				<div class="mb6" :style="titleStyle(datas.title)">{{ datas.title.text }}</div>
				<div :style="subTitleStyle(datas.subtitle)">{{ datas.subtitle.text }}</div>
			</div>
			<div class="sd-image sd-flex"></div>
			<div class="more sd-flex" v-if="datas.more.show == 1" :style="{ height: datas.height + 'px' }">
				{{ datas.more.text }}
				<SvgIcon name="ele-ArrowRight"></SvgIcon>
			</div>
		</div>
		<!-- 删除组件 -->
		<slot name="deles" />
	</div>
</template>

<script setup name="captiontext">
import { STATIC_URL } from '/@/utils/config';
const props = defineProps({
	datas: {},
});

const titleStyle = (title) => {
	return {
		'font-size': title.textFontSize + 'px',
		color: title.color,
		'font-weight': title.other.includes('bold') ? 'bold' : 'normal',
		'font-style': title.other.includes('italic') ? 'italic' : 'normal',
	};
};

const subTitleStyle = (subtitle) => {
	return {
		'font-size': subtitle.textFontSize + 'px',
		color: subtitle.color,
		'font-weight': subtitle.other.includes('bold') ? 'bold' : 'normal',
		'font-style': subtitle.other.includes('italic') ? 'italic' : 'normal',
	};
};

const contentStyle = (content) => {
	return {
		'align-items': content.location == 'center' ? 'center' : 'flex-start',
		'margin-left': content.skew + 'px',
	};
};

const bgStyle = (datas) => {
	return { 'background-color': datas.bgColor, 'background-image': datas.src ? `url(${STATIC_URL}${datas.src})` : 'none' };
};
</script>

<style scoped lang="scss">
.captiontext {
	height: 50px;
	position: relative;
}

.title-block-wrap {
	position: relative;
	height: 100%;
}

.title-block-wrap .more {
	position: absolute;
	right: 10px;
	top: 0;
	line-height: 50px;
	font-size: 12px;
	color: #999;
}

.title-block-wrap .title {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 8;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.title-block-wrap .sd-image {
	height: 100%;
}
</style>
